<template>
  <div class="about-us-page">
    <div class="content" :class="[activeFontClass]">
      <div class="title">
        <p>我们欢迎行业各相关机构与我们进行积极的业务探讨。</p>
        <p>共同为城市道路维护事业添砖加瓦。</p>
      </div>
      <div class="hyform">
        <form action="">
          <div class="item">
            <p class="p1">您机构属于：</p>
            <select class="hyvalue" name="jigou" id="jigou" v-model="organization">
              <option value="城市管理者">城市管理者</option>
              <option value="共享电单车品牌">共享电单车品牌</option>
              <option value="仓储物流供应商">仓储物流供应商</option>
            </select>
          </div>
          <div class="item">
            <p class="p1">您的联系方式：</p>
            <select class="hyvalue" name="lxfs" id="lxfs" v-model="contactType">
              <option value="微信">微信</option>
              <option value="手机号">手机号</option>
            </select>
            <input class="hyvalue2" type="text" name="contact" placeholder="请输入" v-model="contact">
          </div>
          <div class="item">
            <button type="button" @click="onSubmit()">提交后，我们会尽快与您联系</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script>
import COS from 'cos-js-sdk-v5';
import axios from 'axios';
export default {
  name: 'CooperationExchange',
  data() {
    return {
      activeFontClass: "",
      contact: "",
      contactType: "微信",
      organization: "城市管理者",
      Bucket: 'dev-1300222288',
      Region: "ap-shanghai",
      resourceUrl: "https://qcloud.resource.dev.hygeian.com.cn/",
      cos: new COS({
        SecretId: 'AKIDWrwlK3iljS9wUn5yh9NM1TfCYfaT69vV',
        SecretKey: 'aCZKsCHAsKpBJBxXrwlKgogPt75rOhkX'
      }),
      custormerList: [],
    }
  },
  mounted() {
    this.getInfor();
  },
  methods: {
    addAnimate() {
      this.activeFontClass = "display animate__animated animate__fadeIn"
    },
    removeAnimate() {
      this.activeFontClass = "";
    },

    getInfor() {
      var url = 'https://qcloud.resource.dev.hygeian.com.cn/weibo/custormerlist.json?d=' + new Date().getTime();
      var _this = this;
      axios.get(url).then(function (response) {
        _this.custormerList = response.data.items;
      });
    },

    onSubmit() {

      if (this.contact == "") {
        alert("请输入联系方式");
        return;
      }

      this.custormerList.push(JSON.stringify({
        organization: this.organization,
        contactType: this.contactType,
        contact: this.contact
      }));

      var content = JSON.stringify({ items: this.custormerList });
      var blob = new Blob([content], { type: "text/plain;charset=utf-8" }); // 把数据转化成blob对象
      let file = new File([blob], "filename", { lastModified: Date.now() }); // blob转file
      let name = 'custormerlist.json';
      let bucket = 'weibo/';

      this.cos.putObject({
        Bucket: this.Bucket,
        Region: this.Region,
        Key: bucket + name,
        Body: file,
        onProgress: (event) => {

          if (event.total > 0) {
            // (event as any).percent = Math.round(event.loaded * 100 / event.total);
          }

        }
      }, (err, data) => {

        if (data.statusCode == 200) {

          console.log(this.resourceUrl + bucket + name + "?d=" + new Date().getTime());
          alert("数据已提交");
        }

      });

    },
    random_string(len) {

      len = len || 32;

      let chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
      let maxPos = chars.length;
      let pwd = '';

      for (var i = 0; i < len; i++) {
        pwd += chars.charAt(Math.floor(Math.random() * maxPos));
      }
      return pwd;
    }

  }
}
</script>
<style lang="scss" scoped>
.about-us-page {
  height: 100vh;
  background-image: url("../assets/images/hzjl.png");
  background-size: contain;
  background-repeat: no-repeat;

  .display {
    display: block !important;
  }

 

  .content {
    width: 100%;
    display: none;
    position: absolute;
    top: 214px;
    text-align: left;

    .title {
      width: 100%;
      font-size: 36px;
      font-weight: bold;
      color: #FFFFFF;
      text-align: center;
      line-height: 1.8;
    }

    .hyform {
      width: 1000px;
      height: 400px;
      background: #FFFFFF;
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.15);
      border-radius: 10px;
      margin: 0 auto;
      padding-top: 85px;

      .item {
        display: flex;
        padding-top: 37px;

        .p1 {
          width: 200px;
          text-align: right;
          line-height: 52px;
        }

        .hyvalue {
          // flex: 6;
          width: 260px;
          height: 52px;
          font-size: 18px;
          font-weight: 400;
          color: #333333;
          outline: none;
          padding: 0 24px;
        }

        .hyvalue2 {
          width: 260px;
          height: 52px;
          outline: none;
          padding: 0 24px;
          margin-left: 20px;
        }

        button {
          border: none;
          width: 300px;
          height: 60px;
          display: block;
          margin: 0 auto;
          background: #0EC5CC;
          border-radius: 4px;
          font-size: 18px;
          color: #FFFFFF;
          cursor: pointer;
          margin-top: 31px;

          &:active {
            background: #0cadb3;
          }

        }
      }
    }
  }
}
</style>